<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">查看个人计划</view>
		</view>
		<view class="main-content">
			<view class="header">
			    <view class="plan-name">{{ planName }}</view>
			</view>
			
			<view class="info">
				<view class="plan-description">{{ planDescription }}</view>
			</view>
			
			<view class="plan-progress-box">
				<view class="text">当前进度 {{ ((checkinDay / allDay) * 100).toFixed(2) + '%' }}</view>
				<view class="plan-progress">
					<view class="progress" :style="{width: ((checkinDay / allDay) * 100) + '%'}"></view>
				</view>
			</view>
			
			<view class="plan-data-box">
				<view class="text">计划明细</view>
				<view class="plan-data">
					<view>
						<view class="data-title">应签天数</view>
						<view class="dayCount">{{ allDay }}</view>
					</view>
					<view>
						<view class="data-title">已签天数</view>
						<view class="dayCount">{{ checkinDay }}</view>
					</view>
					<view>
						<view class="data-title">未签天数</view>
						<view class="dayCount">{{ allDay - checkinDay }}</view>
					</view>
				</view>
			</view>
			
			<view class="bottom-btn" @click="checkinPlan">{{ checkinFlag ? '今日已打卡' : '完成今日计划打卡' }}</view>
		</view>
	</view>
</template>

<script>
import { plan } from '../../server/plan.js';

export default {
	data() {
		return {
			planId: null,
			planName: '',
			planDescription: '',
			allDay: 0,
			checkinDay: 0,
			checkinFlag: false,    // 是否打卡的标志位，false表示当天并未打卡
			
			// planName: '减肥 10 斤',
			// planDescription: '每天坚持跑步，深蹲，俯卧撑，坚持30天进行打卡，完成目标。',
			// allDay: 30,
			// checkinDay: 10
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		},
		async checkinPlan() {
			if (this.checkinFlag) return ;
			let checkinRes = await plan.checkinPlan(this.planId);
			uni.showToast({
				title: checkinRes.msg,
				icon: 'none'
			});
			if (checkinRes.success) {
				setTimeout(uni.navigateBack, 1500);
			}
		}
	},
	onLoad(options) {
		console.log(options); // 输出传递过来的 id 参数
		this.planId = options.id;
		(async () => {
			let planRes = await plan.getPlanInfo(this.planId);
			let planInfo = planRes.planInfo;
			this.planName = planInfo.name;
			this.planDescription = planInfo.description;
			this.allDay = planInfo.allDay;
			this.checkinDay = planInfo.checkinDay;
			this.checkinFlag = planInfo.checkinFlag;
			console.log(planInfo);
		})();
	},
}
</script>

<style>
.plan-name, .info, .plan-progress-box, .plan-data {
	margin-top: 5vmin;
}

.plan-name {
	font-size: 6vmin;
	font-weight: 900;
	text-align: center;
	word-wrap: break-word;
}

.info {
	font-size: 3vmin;
}

.plan-progress-box, .text {
	font-size: 5vmin;
}

.plan-progress {
	width: 100%;
	height: 2vmin;
	border-radius: 2vmin;
	background-color: rgb(230, 230, 230);
	overflow: hidden;
	position: relative;
	margin: 5vmin 0;
}

.progress {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: rgb(200, 200, 200);
}

.plan-data-box {
	padding-bottom: 30vmin;
}

.plan-data {
	display: flex;
	justify-content: space-evenly;
	font-size: 3vmin;
}

.data-title {
	position: relative;
}

.data-title::before {
	content: "";
	display: block;
	width: 2vmin;
	height: 2vmin;
	background-color: lawngreen;
	border-radius: 50%;
	position: absolute;
	left: -2vmin;
	top: 50%;
	transform: translateY(-50%);
}

.dayCount {
	font-size: 4vmin;
}

.dayCount::after {
	content: '天';
	display: inline;
}

.bottom-btn {
	position: fixed;
	left: 50%;
	bottom: 15vmin;
	width: 80vw;
	height: 10vmin;
	transform: translateX(-50%);
	color: #fff;
	background-color: rgb(117, 117, 117);
	border-radius: 4vmin;
	font-size: 4vmin;
	font-weight: 900;
	text-align: center;
	line-height: 10vmin;
}
</style>
